import { getLocale } from 'locales';
import { useRecoilState, useRecoilValue } from 'recoil';

import CloseIcon from '@mui/icons-material/Close';
import { Box } from '@mui/material';

import WhiteButton from 'components/atoms/buttons/whiteButton';

import { loadingState, sessionState, isRenderingState } from 'state/chat';
import { localeState } from 'state/project';

export default function StopButton() {
  const [loading, setLoading] = useRecoilState(loadingState);
  const [locale] = useRecoilState(localeState);
  const session = useRecoilValue(sessionState);
  const [isRendering, setIsRendering] = useRecoilState(isRenderingState);

  if (!loading) {
    return null;
  }

  const handleClick = () => {
    setLoading(false);
    session?.socket.emit('stop');
    setIsRendering(false)
  };

  return (
    <Box margin="auto">
      <WhiteButton
        id="stop-button"
        startIcon={<CloseIcon />}
        variant="contained"
        onClick={handleClick}
      >
        {getLocale('StopTask', locale)}
      </WhiteButton>
    </Box>
  );
}
